import React from "react";
import { Button } from 'antd'
class componentView extends React.Component {
  constructor(props) {
    super()
    this.state = {
      hobby: "篮球",
      userInfo: {
        identify: "44055"
      }
    }
  }

  chageStateUserInfo = () => {
    const { userInfo } = this.state
    userInfo.identify = '保密'
    this.setState({
      userInfo
    })
  }

  chageStateHobby = () => {
    this.setState({
      hobby: "篮球" + Math.random()
    })
  }
  changeFatherName = () => {
    let { setSex } = this.props
    let random = Math.random()
    setSex("男" + random)
  }

  render() {
    let { sex } = this.props
    let { hobby, userInfo } = this.state
    console.log("componentView");
    return (
      <div>

        <Button type="primary" onClick={this.chageStateHobby} >修改子组件 hobby</Button>
        <Button type="primary" onClick={this.chageStateUserInfo} >修改子组件 userInfo</Button>
        <Button type="primary" onClick={this.changeFatherName} >修改父组件的性别</Button>
        <div> 父组件prop传递的性别: {sex} </div>
        <div> 子组件 state爱好:{hobby}</div>
        <div> 子组件 用户信息:{userInfo.identify}</div>
      </div>
    )
  }
}

export default componentView